<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <!-- 顶部通知栏 -->
        <el-header
          style="
            text-align: right;
            font-size: 16px;
            background-color: #eef2f5;
            color: #333;
          "
        >
          <span>收到 {{ unreadNotifications }} 条新通知</span>
        </el-header>

        <!-- 主要内容区域 -->
        <el-main>
          <!-- 当前月份赛事日历 -->
          <el-calendar v-if="currentMonthEvents.length">
            <template #dateCell="{ date, data }">
              <div :class="['calendar-cell', { 'has-event': hasEventOnDate(date) }]">
                <span class="date">{{
                  data.day.split("-").slice(2).join("-")
                }}</span>
                <ul class="events">
                  <li
                    v-for="event in getEventsByDate(date)"
                    :key="event.id"
                    class="event-item"
                  >
                    {{ event.name }}
                  </li>
                </ul>
              </div>
            </template>
          </el-calendar>
          <p v-else>本月暂无赛事安排。</p>
        </el-main>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      unreadNotifications: 5, // 示例：有5条未读通知
      currentMonthEvents: [
        // 这里放置当前月份的赛事数据，例如：
        { id: 1, name: "比赛A", date: "2025-01-20" },
        { id: 2, name: "比赛B", date: "2025-01-25" },
        // 添加更多赛事...
      ],
    };
  },
  methods: {
    getEventsByDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();

      return this.currentMonthEvents.filter((event) => {
        const [eventYear, eventMonth, eventDay] = event.date.split("-");
        return eventYear == year && eventMonth == month && eventDay == day;
      });
    },
    hasEventOnDate(date) {
      return this.getEventsByDate(date).length > 0;
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  overflow-x: hidden;

  /* 简单样式调整 */
  .el-header {
    line-height: 60px;
  }

  .calendar-cell {
    padding: 8px;
  }

  .date {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .events {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .event-item {
    font-size: 14px;
    color: brown;
    font-weight: bolder;
    margin: 2px 0;
  }

  .has-event {
    background-color: #e1f5fe; /* 淡蓝色 */
  }
}
</style>

